<template>
	<div class="testlog">
		<div class="flex-container">
			<div class="form-item">
				身份证号码所在列:
				<el-input v-model="input" style="width: 100px" placeholder="如：A" />
			</div>
			<div class="form-item">
				开始行号:
				<el-input-number v-model="num1" />
			</div>
			<div class="form-item">
				结束行号:
				<el-input-number v-model="num2" />
			</div>
			<div class="form-item">
				年龄戳:
				<el-input v-model="input_date" style="width: 180px" placeholder="如：20240831" />
			</div>
			<div>
				<el-button class="el-button" type="primary" @click="checkclick">校验</el-button>
			</div>
		</div>

		<div class="flex-container">

			<div class="demo-button-style">
				选择写入项并填入写入列：
				<el-checkbox-group v-model="checkboxGroup2" size="medium">
					<el-checkbox-button v-for="city in cities" :key="city" :value="city">
						{{ city }}
					</el-checkbox-button>
				</el-checkbox-group>
			</div>
			<div>
				<el-button class="el-button" type="primary" @click="writeclick">写入表格</el-button>
			</div>
		</div>

		<div class="flex-container1">
			<div class="form-item">
				<el-input v-model="input1" style="width: 90px" placeholder="如：A" />
			</div>
			<div class="form-item">

				<el-input v-model="input2" style="width: 90px" placeholder="如：A" />
			</div>
			<div class="form-item">
				<el-input v-model="input3" style="width: 90px" placeholder="如：A" />
			</div>
			<div class="form-item">
				<el-input v-model="input4" style="width: 60px" placeholder="如：A" />
			</div>
			<div class="form-item">
				<el-input v-model="input5" style="width: 60px" placeholder="如：A" />
			</div>
			<div class="form-item">
				<el-input v-model="input6" style="width: 70px" placeholder="如：A" />
			</div>
			<div class="form-item">
				<el-input v-model="input7" style="width: 80px" placeholder="如：A" />
			</div>
			<div class="form-item">
				<el-input v-model="input8" style="width: 90px" placeholder="如：A" />
			</div>


		</div>

		<div>
			<el-table :data="data.arr" border="true" style="">
				<el-table-column prop="id" label="序号" width="60" />
				<el-table-column prop="IDCard" label="身份证号码" width="180" />
				<el-table-column prop="date1" label="出生日期1" width="120" />
				<el-table-column prop="date2" label="出生日期2" width="120" />
				<el-table-column prop="date3" label="出生日期3" width="160" />
				<el-table-column prop="garder" label="性别" width="60" />
				<el-table-column prop="age" label="年龄" width="60" />
				<el-table-column prop="address" label="户籍地" />
				<el-table-column prop="code" label="户籍代码" width="130" />
				<el-table-column prop="status" label="校验状态" width="120" />" />
			</el-table>
		</div>
	</div>
</template>

<script setup>
	import {
		ElMessageBox
	} from 'element-plus'
	import dlgFunc from "./js/testlog.js"
	import {
		ref,
		reactive
	} from 'vue';
	const data = reactive({
		arr: []
	})

	const checkboxGroup2 = ref([])
	const cities = ['出生日期1', '出生日期2', '出生日期3', '性  别', '年龄', '户籍地', '户籍代码', '校验状态']
	const num1 = ref(2)
	const num2 = ref(3)
	const input = ref("")
	const input1 = ref("")
	const input2 = ref("")
	const input3 = ref("")
	const input4 = ref("")
	const input5 = ref("")
	const input6 = ref("")
	const input7 = ref("")
	const input8 = ref("")
	const input_date = ref("")
	const checkclick = () => {

		if (input_date.value == "") {
			ElMessageBox.alert("年龄戳不能为空", '提示', {
				confirmButtonText: '关闭'
			})
			return
		}
		if (input.value == "") {
			ElMessageBox.alert("身份证号码所在列不能为空", '提示', {
				confirmButtonText: '关闭'
			})
			return
		}
		if (num1.value > num2.value) {
			ElMessageBox.alert("开始行号不能大于结束行号", '提示', {
				confirmButtonText: '关闭'
			})
			return
		}
		if (num1.value < 1 || num2.value < 1) {
			ElMessageBox.alert("开始行号和结束行号必须大于等于1", '提示', {
				confirmButtonText: '关闭'
			})
			return
		}

		let dataarry = dlgFunc.checkbuttonclick(input.value, num1.value, num2.value, input_date.value)
		data.arr = dataarry;
		ElMessageBox.alert("校验完成", '提示', {
			confirmButtonText: '关闭'
		})
	}

	const writeclick = () => {
		let checkarr = checkboxGroup2.value
		if (checkarr.length != 0) {
			for (let i = 0; i < checkarr.length; i++) {
				// 遍历数据数组
				if (checkarr[i] == "出生日期1") {
					let garders = [];
					for (let j = 0; j < data.arr.length; j++) {
						garders.push(data.arr[j].date1)
					}
					if (input1.value == "") {
						ElMessageBox.alert("请输入" + checkarr[i] + "列写入列号，如A", '提示', {
							confirmButtonText: '关闭'
						})
						return;
					} else {
						dlgFunc.writebuttonclick(input1.value, num1.value, num2.value, garders)
						ElMessageBox.alert("写入" + input1.value + "列" + checkarr[i] + "完成", '提示', {
							confirmButtonText: '关闭'
						})
					}
				}
				if (checkarr[i] == "出生日期2") {
					let garders = [];
					for (let j = 0; j < data.arr.length; j++) {
						garders.push(data.arr[j].date2)
					}
					if (input2.value == "") {
						ElMessageBox.alert("请输入" + checkarr[i] + "列写入列号，如A", '提示', {
							confirmButtonText: '关闭'
						})
						return;
					} else {

						dlgFunc.writebuttonclick(input2.value, num1.value, num2.value, garders)
						ElMessageBox.alert("写入" + input2.value + "列" + checkarr[i] + "完成", '提示', {
							confirmButtonText: '关闭'
						})
					}
				}
				if (checkarr[i] == "出生日期3") {
					let garders = [];
					for (let j = 0; j < data.arr.length; j++) {
						garders.push(data.arr[j].date3)
					}
					if (input3.value == "") {
						ElMessageBox.alert("请输入" + checkarr[i] + "列写入列号，如A", '提示', {
							confirmButtonText: '关闭'
						})
						return;
					} else {
						dlgFunc.writebuttonclick(input3.value, num1.value, num2.value, garders)
						ElMessageBox.alert("写入" + input3.value + "列" + checkarr[i] + "完成", '提示', {
							confirmButtonText: '关闭'
						})
					}

				}
				if (checkarr[i] == "性  别") {
					let garders = [];
					for (let j = 0; j < data.arr.length; j++) {
						garders.push(data.arr[j].garder)
					}
					if (input4.value == "") {
						ElMessageBox.alert("请输入" + checkarr[i] + "列写入列号，如A", '提示', {
							confirmButtonText: '关闭'
						})
						return;
					} else {
						dlgFunc.writebuttonclick(input4.value, num1.value, num2.value, garders)
						ElMessageBox.alert("写入" + input4.value + "列" + checkarr[i] + "完成", '提示', {
							confirmButtonText: '关闭'
						})
					}

				}
				if (checkarr[i] == "年龄") {
					let garders = [];
					for (let j = 0; j < data.arr.length; j++) {
						garders.push(data.arr[j].age)
					}
					if (input5.value == "") {
						ElMessageBox.alert("请输入" + checkarr[i] + "列写入列号，如A", '提示', {
							confirmButtonText: '关闭'
						})
						return;
					} else {
						dlgFunc.writebuttonclick(input5.value, num1.value, num2.value, garders)
						ElMessageBox.alert("写入" + input5.value + "列" + checkarr[i] + "完成", '提示', {
							confirmButtonText: '关闭'
						})
					}
				}
				if (checkarr[i] == "户籍地") {
					let garders = [];
					for (let j = 0; j < data.arr.length; j++) {
						garders.push(data.arr[j].address)
					}
					if (input6.value == "") {
						ElMessageBox.alert("请输入" + checkarr[i] + "列写入列号，如A", '提示', {
							confirmButtonText: '关闭'
						})
					} else {
						dlgFunc.writebuttonclick(input6.value, num1.value, num2.value, garders)
						ElMessageBox.alert("写入" + input6.value + "列" + checkarr[i] + "完成", '提示', {
							confirmButtonText: '关闭'
						})
					}
				}
				if (checkarr[i] == "户籍代码") {
					let garders = [];
					for (let j = 0; j < data.arr.length; j++) {
						garders.push(data.arr[j].code)
					}
					if (input7.value == "") {
						ElMessageBox.alert("请输入" + checkarr[i] + "列写入列号，如A", '提示', {
							confirmButtonText: '关闭'
						})
					} else {
						dlgFunc.writebuttonclick(input7.value, num1.value, num2.value, garders)
						ElMessageBox.alert("写入" + input7.value + "列" + checkarr[i] + "完成", '提示', {
							confirmButtonText: '关闭'
						})
					}

				}
				if (checkarr[i] == "校验状态") {
					let garders = [];
					for (let j = 0; j < data.arr.length; j++) {
						garders.push(data.arr[j].status)
					}
					if (input8.value == "") {
						ElMessageBox.alert("请输入" + checkarr[i] + "列写入列号，如A", '提示', {
							confirmButtonText: '关闭'
						})
					} else {
						dlgFunc.writebuttonclick(input8.value, num1.value, num2.value, garders)
						ElMessageBox.alert("写入" + input8.value + "列" + checkarr[i] + "完成", '提示', {
							confirmButtonText: '关闭'
						})
					}

				}
			}

		}
	}
</script>

<style scoped>
	.testlog {
		padding: 10px;

		display: grid;
		/* 给容器添加内边距 */
		grid-template-rows: repeat(3, auto);
		gap: 20px;
	}

	.flex-container {
		display: flex;
		flex-direction: row;
		/* 这不是必需的，因为 row 是默认值 */
		align-items: flex-start;
		/* 根据需要调整对齐方式 */
		justify-content: space-between;
		/* 或者使用 space-around, flex-start 等来分配空间 */
		/*给子元素添加间距*/
		gap: 10px;

	}

	.flex-container1 {
		display: flex;
		flex-direction: row;
		/* 这不是必需的，因为 row 是默认值 */
		/* gap: 0px; */

	}

	.form-item {
		/* 如果需要的话，可以添加一些内边距或外边距 */
		margin-right: 5px;
		font-size: small;
		/* 右边距，最后一个元素可以通过 :last-child 伪类来去除 */


	}

	.form-item:last-child {
		margin-right: 0;
		/* 移除最后一个元素的右边距 */
	}
</style>